<template>
	<view class="text-df">
		<uni-search-bar v-model="param.name" clearButton="auto" cancelButton="none" radius="20" @confirm="search"
			@clear="cancel_search" bgColor="#f5f5f5" placeholder="请输入队伍名称">
			<template v-slot:searchIcon>
				<uni-icons color="#d04d44" size="25" type="search" />
			</template>
		</uni-search-bar>

		<view class="padding-lr-xs">
			<view v-for="(item,index) in team_list" :key="index" class="margin-top-xs padding-xs "
				style="background-color: #fdf2f1; border-radius: 15rpx;" @click="open_pop(item)">
				<view class="flex-row-bt">
					<view class="flex-row" style="width: 80%;">
						<view class="iconfont icon-icon margin-right-xs" style="color: #d81e06; font-size: 40rpx;">
						</view>
						<view>{{item.teamName}}</view>
					</view>
					<view>{{item.siteId}}人</view>
				</view>
				<view class="text-low " style="margin: 30rpx 0 0 60rpx;">{{item.siteName}}</view>
			</view>
		</view>

		<!-- 弹窗--查看队伍 -->
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="bg-white  text-df" style="padding: 0 30rpx 40rpx;">
				<view style="text-align: right;" class="padding-xs">
					<uni-icons type="closeempty" size="20" @click="colse_pop"></uni-icons>
				</view>
				<view
					style="padding: 10rpx 20rpx 40rpx; background-color: #fdf2f1; width: 500rpx; margin: auto; border-radius: 10rpx;"
					class="  ">
					<uni-forms ref="formRole" :modelValue="form" label-position="top">
						<uni-forms-item label="个人姓名" name="name" :required='true'>
							<view style="width: 100%;height: 30px;border-bottom: 1px solid #FBD2D6; ">
								<view class="text-mid">{{form.name}}</view>
								<!-- <input style="" v-model="form.name" class="input" type="text" placeholder="请输入个人姓名" /> -->
							</view>
						</uni-forms-item>
						<uni-forms-item label="加入时间" name="gridId" :required='true'>
							<view style="width: 100%;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
								<view class="text-mid">{{form.time}}</view>
							</view>
						</uni-forms-item>
					</uni-forms>
					<view style="width: 100%;display: flex; justify-content: center;" class="">
						<view class="return-text" @click="colse_pop">
							取消
						</view>
						<view class="empower-text" @click="colse_pop()">
							退出队伍
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app"
	import { reactive, ref } from 'vue';
import { joined, joinedquit } from "../../../api/team/team";
	//查询参数
	const param = reactive({
		name: ''
	})
	const team_list = ref([{
		name: '百元姐服务队',
		people: 231,
		grid: '百元服务站'
	}, {
		name: '百元姐服务队',
		people: 231,
		grid: '百元服务站'
	}, {
		name: '百元姐服务队',
		people: 231,
		grid: '百元服务站'
	}, {
		name: '百元姐服务队',
		people: 231,
		grid: '百元服务站'
	}])

	// 定义表单数据和规则
	const form = reactive({
		name: '百元姐服务队',
		time: '2020年9月2日',
		id:""
	});
	onLoad(()=>{
		console.log('111111')
		joined().then(res=>{
			team_list.value = res.data
		})
	})
	//搜索
	const search = () => {

	}

	//取消搜索
	const cancel_search = () => {

	}

	//弹窗
	const popup = ref(null)

	//打开弹出
	const open_pop = (e) => {
		popup.value.open()
		form.name = e.teamName
		form.time = e.joinDatetime
		form.id = e.teamId
	}

	const colse_pop = () => {
		joinedquit(form.id).then(res=>{
			if(res.code === 200){
				joined().then(res=>{
					team_list.value = res.data
					popup.value.close()
				})
			}
		})

	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped lang="scss">
	.empower-text {
		height: 30px;
		width: 58%;
		margin-left: 3%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.return-text {
		height: 30px;
		width: 33%;
		border-radius: 5px;
		background-color: rgba(243, 118, 128, 0.51);
		text-align: center;
		color: #EE3F4D;
		align-items: center;
		display: flex;
		justify-content: center;
	}
</style>
